<template>
  <div class="hello">
    <h1>TXlivePusher</h1>
    <input type="text" id="pushurl">
    <div id="localStream"></div>
    <button @click="initTXlivePusher" id="initbtn">初始化TXLivePusher</button>
    <button @click="startTXlivePusher" id="startbtn">TXLivePusher开始推流</button>
    <div id="log">
      <div class="room-logs" id="logMessage">
        <h3>SDK相关数据</h3>
        <div v-for="item in logs" :key="item" class="logs">
          {{ item }}
        </div>
      </div>
      <div class="room-logs" id="pushLogMessage">
        <h3>上行推流相关数据</h3>
        <div v-for="(ids,index) in pushLogs" :key="index" class="pushlogs">
          {{ ids }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TXLivePusher',
  livePusher:"",
  data(){
    return {
      logs:[],
      pushLogs:[]
    }
  },
  props: {
    msg: String
  },
  created() {
    this.loadExternalJs('https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.2.min.js').then(()=>{
      this.logs.push('--------JS动态加载完成--------')
      this.logs.push('--------开始初始化TXLivePusher对象--------')
      this.livePusher = new TXLivePusher();
      this.logs.push('--------初始化TXLivePusher对象完成--------')
      this.initLisenter()
    });

  },
  methods:{
    initLisenter:function () {
      this.logs.push('--------开始注册监听--------')
      let that = this
      //监听
      this.livePusher.setObserver({
        that,
        // 推流警告信息
        onWarning: function(code, msg) {
          that.pushLogs.push('推流警告onWarning ' + code + msg)
          console.log(code, msg);
        },
        // 推流连接状态
        onPushStatusUpdate: function(status, msg) {
          console.log(status, msg);
          that.pushLogs.push('推流连接状态onPushStatusUpdate ' + status + msg)
        },
        // 推流统计数据
        onStatisticsUpdate: function(data) {
          console.log('video fps is ' + data.video.framesPerSecond);
          // that.pushLogs.push('video fps is ' + data.video.framesPerSecond)
        },
        onCaptureFirstVideoFrame:function (e) {
          that.pushLogs.push('--------第一帧准备完成，可以传入推流地址推流--------')
        }
      });
      this.logs.push('--------监听注册完成--------')
    },
    loadExternalJs: function(src) {
      return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = src;
        document.body.appendChild(script);
        script.onload = () => {
          resolve();
        };
        script.onerror = () => {
          reject();
        };
      });
    },
    initTXlivePusher:function () {
      console.log(this.livePusher)
      this.livePusher.setRenderView('localStream'); //设置展示本地流的容器div
      document.getElementById('localStream').getElementsByTagName('video')[0].muted = true; //静音默认的video声音
      // 设置视频质量
      this.livePusher.setVideoQuality('720p');
      // 设置音频质量
      this.livePusher.setAudioQuality('standard');
      // 自定义设置帧率
      this.livePusher.setProperty('setVideoFPS', 25);
      // 打开摄像头
      this.livePusher.startCamera();
      // 打开麦克风
      this.livePusher.startMicrophone();
    },
    startTXlivePusher:function () {
      var pushUrl = document.getElementById('pushurl').value
      console.log(pushUrl)
      this.livePusher.startPush(pushUrl);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#pushurl{
  margin-bottom: 20px;
}
#initbtn{
  margin-top: 20px;
}
#startbtn{
  margin-top: 20px;
  margin-left: 60px;
}
#log{
  display: flex;
  justify-content: center;
}
#logMessage{
  width: 300px;
  margin-top: 20px;
  background-color: #01a4fd;
}
#pushLogMessage{
  width: 300px;
  margin-left: 50px;
  margin-top: 20px;
  background-color: #01a4fd;
}

</style>
